<template>
  <el-form :inline="true">
    <el-form-item>
      <el-button type="primary" icon="Plus" @click="addDialog = true">添加公告</el-button>
      <el-button type="danger" icon="Delete" @click="deleteAnnouncement(multipleSelection)">批量删除</el-button>
    </el-form-item>
  </el-form>
  <el-form :inline="true" :model="formData">
    <el-form-item label="公告标题: ">
      <el-input v-model="formData.announcementTitle" placeholder="请输入公告标题" autocomplete="off" />
    </el-form-item>
    <el-form-item label="是否发布: " style="width:195px">
      <el-select v-model="formData.announcementStatus" placeholder="请选择状态">
        <el-option :label="announcementStatus === 0? '未发布' : '已发布'" :value="announcementStatus" v-for="announcementStatus in [0, 1]"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="loadTableData">搜索</el-button>
      <el-button @click="reset">清空</el-button>
    </el-form-item>
  </el-form>
  <el-table style="height: 65vh" :loading="loading" :data="tableData" @selection-change="handleSelectionChange">
    <el-table-column type="selection" />
    <el-table-column type="expand">
      <template #default="props">
        <div m="4">
          <div style="width: 80%;margin: 0 auto" v-if="props.row.announcementContent">
            <div ref="editorDiv" v-html="generateEditorContent(props.row.announcementContent)"></div>
          </div>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="公告标题" prop="announcementTitle" />
    <el-table-column label="发布时间" prop="announcementReleased" />
    <el-table-column label="状态" align="center">
      <template v-slot="scope">
        <el-tag type="success" v-if="scope.row.announcementStatus === 0">未发布</el-tag>
        <el-tag type="danger" v-else-if="scope.row.announcementStatus === 1">已发布</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="发布/修改" fixed="right" align="center">
      <template v-slot="scope">
        <el-link v-if="scope.row.announcementStatus === 0" class="completed-class" type="success" icon="Promotion" style="margin-left: 10px" @click="updateStatus(scope.row.announcementId)">发布</el-link>
        <el-link v-if="scope.row.announcementStatus === 0" type="primary" style="padding-left: 10px" icon="edit" @click="showUpdate(scope.row)">修改</el-link>
      </template>
    </el-table-column>
    <el-table-column label="删除" fixed="right" align="center">
      <template v-slot="scope">
        <el-link type="danger" style="padding-left: 10px" icon="delete" @click="deleteAnnouncement(scope.row.announcementId)">删除</el-link>
      </template>
    </el-table-column>
  </el-table>

  <AnnouncementUpdateView v-if="updateDialog" v-model:updateDialog="updateDialog" @loadData="loadTableData" v-model:row="RowData" />

  <AnnouncementAddView v-if="addDialog" v-model:addDialog="addDialog" @loadData="loadTableData" :tableData="tableData" />
</template>

<script lang="ts" setup>
import axios from "@/axios/index";
import { reactive, ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import AnnouncementAddView from "./AnnouncementAddView.vue";
import AnnouncementUpdateView from "./AnnouncementUpdateView.vue";
import '@wangeditor/editor/dist/css/style.css';
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";

// 角色添加控制
const addDialog = ref(false);
// 模糊查询
let loading = ref(true);
let tableData = ref([]);
let RowData = reactive({});
let updateDialog = ref(false);
let formData = reactive({
  announcementTitle: "",
  announcementStatus: "",
});
function reset() {
  formData.announcementTitle = "";
  formData.announcementStatus = "";
  loadTableData();
}

// 状态值
let status = ref(0);
const multipleSelection = ref([]);

// 加载数据
function loadTableData () {
  loading.value = true;
  axios.get("/announcement/selectAll", {
        params: {
          announcementTitle: formData.announcementTitle,
          announcementStatus: formData.announcementStatus,
        },
      })
      .then((resp) => {
        loading.value = true;
        tableData.value = resp.data.data;
      });
}

// 删除用户
let deleteAnnouncement = function (id) {
  let ids = ref([]);
  if (typeof id === "number") {
    ids.value.push(id);
  } else {
    for (let i = 0; i < id.length; i++) {
      ids.value.push(id[i].announcementId);
    }
  }
  if (ids.value.length < 1) {
    ElMessageBox.alert("请选择至少一条数据", "系统提示", {
      confirmButtonText: "好的",
      type: "warning",
    });
    return;
  }
  ElMessageBox.confirm(
      "该操作将永久删除此公告,请确认时候继续操作?",
      "系统提示",
      {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      }
  )
      .then(() => {
        axios.get(`/announcement/delete/${ids.value}`).then((response) => {
          ElMessage({
            type: "success",
            message: "删除成功",
          });
          loadTableData();
        });
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消删除操作',
        });
      });
};

// 多选框发生变化
const handleSelectionChange = (val) => {
  multipleSelection.value = val;
};

// 显示修改界面
function showUpdate(data) {
  RowData = data;
  updateDialog.value = true;
}

// 改变状态
let updateStatus = function (announcementId) {
  const currentStatus = tableData.value.find(
      (item) => item.announcementId === announcementId
  ).announcementStatus;
  const newStatus = currentStatus === 0? 1 : 0;
  ElMessageBox.confirm(
      "该操作将发布此公告,请确认是否继续操作?",
      "系统提示",
      {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      }
  )
      .then(() => {
        axios.post(`/announcement/updateStatus`, {
          announcementId,
          announcementStatus: newStatus,
        }).then(() => {
          ElMessage({
            type: "success",
            message: "发布成功",
          });
          loadTableData();
        });
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消发布操作',
        });
      });
};

function generateEditorContent(content) {
  return `<div ref="editorDiv"><Toolbar :editor="editorRef" :defaultConfig="defaultConfige" :mode="mode"/><Editor v-model="formData.announcementContent" :defaultConfig="editorConfig" :mode="mode" @onCreated="handleCreated">${content}</Editor></div>`;
}

loadTableData();
</script>

<style lang="scss" scoped>
.el-table__expand-column div {
  word-break: break-all;
  padding: 8px;
}
</style>